<template>
  <div class="loginPage">
    <div class="loginBox">
      <h2>账号登录</h2>
      <Form ref="loginInfo"
            :model="loginInfo"
            :rules="loginRule">
        <FormItem prop="account">
          <Input type="text"
                 v-model="loginInfo.account"
                 autocomplete="on"
                 placeholder="账号"
                 icon="ios-person-outline" />
        </FormItem>
        <FormItem prop="password">
          <Input type="password"
                 v-model="loginInfo.password"
                 placeholder="密码"
                 @keyup.enter.native="login"
                 icon="ios-lock-outline" />
        </FormItem>
        <Button class="loginBtn btn_1"
                @click="login">登 录</Button>
      </Form>
      <h4></h4>
    </div>
  </div>
</template>

<script>
  import md5 from 'js-md5';
  export default {
    name: "login",
    data () {
      return {
        loginInfo: {
          account: '',
          password: ''
        },
        loginRule: {
          account: [
            { required: true, message: '请输入您的账号', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入您的密码', trigger: 'blur' },
            { type: 'string', min: 4, message: '此密码长度最少为6位', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      login () {
        this.$refs.loginInfo.validate(valid => {
          if (valid) {
            // 用户信息
            this.post(this.api.login, {
              'loginName': this.loginInfo.account,
              'password': md5(this.loginInfo.password)
            }).then(res => {
              if (res.data.code === '200') {
                sessionStorage.setItem('token', JSON.stringify(res.data.object.password));  //token存储
                sessionStorage.setItem('userName', JSON.stringify(res.data.object.userName));  //userName存储
                sessionStorage.setItem('id', JSON.stringify(res.data.object.id));  //id存储
                this.$Message.success('登录成功!');
                this.$router.push({ name: 'bannerList' });
              }
            })
          }
        });
      }
    }
  }
</script>

<style>
</style>
